<template>
<view>
<view class="container" v-if="requestData.cart_list.length > 0">
  <view class="login-in pd-bg-fff">
    <block v-for="(item, idx) in requestData.cart_list" :key="idx" :data-item="idx">
      <view class="h-pkc" v-if="item.combination_cart.length>0&&item.combination">
        <!-- 搭配购title -->
        <view class="flex top-title">
        <!-- <view bindtap="checkItem" data-check="item.selected" data-item="{{idx}}">
            <icon type="success" size="16" color="{{item.selected?'red':'gray'}}" />
          </view> -->
          <view @tap="checkItem" class="choosebox  allbox">
            <image v-if="item.selected" src="/static/images/ischeck.png"></image>
            <image v-if="!item.selected" src="/static/images/nocheck.png"></image>
          </view>
          <view>
            <view class="dpg-title">{{item['combination']['title']}}</view>
          </view>
        </view>
        <!-- 搭配购主商品 -->
        <view class="order-item">
          <view class="goods-ico" @tap="checkItem" data-check="item.selected" :data-item="idx">
          </view>
          <navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
            <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
          </navigator>
          <view class="goods-cont">
            <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">{{item.goods_name}}</navigator>
            <view class="goods-attribute">{{item.spec_key_name}}</view>
            <view class="goods-price"><text class="co-red">￥{{item.member_goods_price}}</text><text class="market">￥{{item.market_price}}</text></view>
            <view class="goods-price co-red ">
              <text class="dpg-price">共省：￥{{item.cut_fee}}</text>
            </view>
            <view class="btn-del" @tap="deleteItem" :data-item="idx">
              <image class="delimg" src="/static/images/dele.png"></image>
            </view>
            <view class="count">
              <view class="sub" @tap.stop="subNum" :data-item="idx">-</view>
              <input type="number" :value="item.goods_num" :data-item="idx" @blur="valueToNum"></input>
              <view class="add" @tap.stop="addNum" :data-item="idx">+</view>
            </view>
          </view>
        </view>
        <!-- 搭配购子商品 -->
        <block>
          <view v-for="(item, index) in item.combination_cart" :key="index" class="order-item">
            <view class="goods-ico" data-check="item.selected" :data-item="idx">
            </view>
            <navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
              <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
            </navigator>
            <view class="goods-cont">
              <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">{{item.goods_name}}</navigator>
              <view class="goods-attribute ellipsis-2">{{item.spec_key_name}}</view>
              <view class="goods-price"><text class="co-red">￥{{item.member_goods_price}}</text><text class="market">￥{{item.market_price}}</text></view>
              <view class="goods-price co-red ">
                <text class="dpg-price">共省：￥{{item.cut_fee}}</text>
              </view>
              <view class="btn-del" @tap="deleteItem" :data-index="index" :data-item="idx">
                <image class="delimg" src="/static/images/dele.png"></image>
              </view>
              <view class="p-sign">
                x{{item.goods_num}}
              </view>
            </view>
          </view>
        </block>
      </view>
      <!-- 普通 -->
      <view class="order-item" v-else>
        <!-- <view class="goods-ico" bindtap="checkItem" data-check="item.selected" data-item="{{idx}}">
          <icon type="success" size="16" color="{{item.selected?'red':'gray'}}" />
        </view> -->
        <view @tap="checkItem" data-check="item.selected" :data-item="idx" class="choosebox  itembox">
          <image v-if="item.selected" src="/static/images/ischeck.png"></image>
          <image v-if="!item.selected" src="/static/images/nocheck.png"></image>
        </view>
        <navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
          <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=200&height=200'"></image>
        </navigator>
        <view class="goods-cont">
          <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">{{item.goods_name}}</navigator>
          <view class="goods-attribute ellipsis-2">{{item.spec_key_name}}</view>
          <view class="goods-price"><text class="co-red">￥{{item.member_goods_price}}</text><text class="market">￥{{item.market_price}}</text></view>
          <view class="btn-del" @tap="deleteItem" :data-item="idx">
            <image class="delimg" src="/static/images/dele.png"></image>
          </view>
          <view class="count">
            <view class="sub" @tap.stop="subNum" :data-item="idx">一</view>
            <input type="number" :value="item.goods_num" :data-item="idx" @blur="valueToNum"></input>
            <view class="add" @tap.stop="addNum" :data-item="idx">+</view>
          </view>
        </view>
      </view>
    </block>

  </view>
  <view class="pay-for">
    <!-- <label class="checkbox" bindtap="">
      <icon class="ico-check" type="success" size="20" color="{{checkAllToggle?'red':'gray'}}" />全选
    </label> -->
    <label class="checkbox" @tap>
      <view @tap="checkAll" class="choosebox  allbox">
        <image v-if="checkAllToggle" src="/static/images/ischeck.png"></image>
        <image v-if="!checkAllToggle" src="/static/images/nocheck.png"></image>
      </view>
    </label>
    <button :class="setTlement?'pay-btn':'pay-disable'" @tap="checkout">去结算</button>
    <view class="consumer">
      <view class="total">总计 :
        <text class="co-red">{{requestData.cart_price_info.total_fee}}</text>
      </view>
      <!-- <text class="tips">不包含运费</text> -->
    </view>
  </view>
</view>

<view class="no-data" v-if="!requestData.cart_list || requestData.cart_list.length == 0">
  <image src="/static/images/cart-null_1.png" class="shopcar-image"></image>
  <view class="no-word">你的购物车空空如也~</view>
  <navigator @tap.stop="gohome" class="lookbtn"> 去逛逛 </navigator>
</view>

<!--特色推荐-->
<view class="container">
  <view class="section">
    <view class="section-title">热卖推荐</view>
    <view class="section-subtitle">
      <image class="wh100" src="/static/images/pic-interesting.png"></image>
    </view>
  </view>

  <view class="choice_box">
    <view class="choice_list">
      <block v-for="(item, index) in hot" :key="index">
        <view class="choice_item">
          <navigator :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
            <view class="h-label" v-if="item.label_name" style="background: url(/images/h-label.png) no-repeat;background-size:175rpx 40rpx;">{{item.label_name}}</view>
            <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image>
          </navigator>
          <navigator class="title ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">{{item.goods_name}}</navigator>
          <view class="choice_footer">
            <view class="price">￥{{item.shop_price}}</view>
            <view class="similer">销量:{{item.virtual_sales_sum + item.sales_sum}}</view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block data-type="template" data-is="model" data-attr="page:menu_index,menu_model:menu_model,url:url,defaultMenu:defaultMenu">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <view class="tpd-footer tpd-footer2" v-if="menu_model.length>0">
       <block v-for="(item, index) in menu_model" :key="index">
        <view hover-class="none" @tap.stop="topage" data-obj="custom" :data-idx="index" :class="menu_index == index ? 'tpd-footer-select' : ''"><image :src="menu_index == index ? url + item.pic2 : url + item.pic1"></image><text :style="'color:' + (menu_index == index ? item.navFontColor : '')">{{item.title_name}}</text></view>  
        </block> 
    </view>

    <view class="tpd-footer tpd-footer1" v-if="defaultMenu">
        <view hover-class="none" @tap.stop="topages" data-idx="0" :class="menu_index == 0 ? 'tpd-footer-select' : ''"><image :src="menu_index == 0 ? '/images/home2.png' : '/images/home1.png'"></image><text>首页</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="1" :class="menu_index == 1 ? 'tpd-footer-select' : ''"><image :src="menu_index == 1 ? '/images/category2.png' : '/images/category1.png'"></image><text>分类</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="4" :class="menu_index == 4 ? 'tpd-footer-select' : ''"><image :src="menu_index == 4 ? '/images/play2.png' : '/images/play1.png'"></image><text>直播</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="2" :class="menu_index == 2 ? 'tpd-footer-select' : ''"><image :src="menu_index == 2 ? '/images/cart2.png' : '/images/cart1.png'"></image><text>购物车</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="3" :class="menu_index == 3 ? 'tpd-footer-select' : ''"><image :src="menu_index == 3 ? '/images/user2.png' : '/images/user1.png'"></image><text>我的</text></view>
    </view>
  </view>
</block>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      checkAllToggle: false,
      //全选标志
      defaultMenu: false,
      //默认底部菜单显示状态
      currentPage: 1,
      hot: null,
      menu_index: "",
      menu_model: "",
      webUrl: "",
      setTlement: false
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    var that = this;
    load.init(that, '', 'hot');
    that.requestHotGoods();

    if (app.globalData.auth.hadAuth()) {
      app.globalData.getUserInfo(function () {
        that.getCardList(); //获取登录后的购物车
      });
    }

    if (app.globalData.menu_model.length == 0) {
      app.globalData.menu_index = 2;
    } else {
      //遍历自定义底部，该页面在哪个位置
      for (var i in app.globalData.menu_model) {
        if (app.globalData.menu_model[i].app_url.indexOf('Cart') != -1) {
          app.globalData.menu_index = i;
        }
      }
    }

    that.setData({
      defaultMenu: app.globalData.defaultMenu,
      menu_index: app.globalData.menu_index,
      menu_model: app.globalData.menu_model
    });
  },
  onPullDownRefresh: function (e) {
    this.hot = null;
    this.currentPage = 1;
    load.resetConfig();
    this.requestHotGoods();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestHotGoods();
    }
  },
  //返回的时候也可以刷新
  onShow: function () {
    this.getCardList();
  },
  onPullDownRefresh: function (e) {
    this.getCardList();
  },
  methods: {
    requestHotGoods: function () {
      var that = this;
      var requestUrl = '/api/Goods/guessYouLike?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
      });
    },

    gohome() {
      uni.reLaunch({
        url: '/pages/index/index/index'
      });
    },

    /** 跳转模式 自定义页面 || 自定义菜单 || 自定义控件控件*/
    topage(e) {
      //自定义菜单
      var idx = e.currentTarget.dataset.idx;
      app.globalData.menu_index = idx;
      var page_type = this.menu_model[idx].url_type;
      var id = this.menu_model[idx].app_url; //判断跳转的类型  0 = 外部网址,1 = 小程序页面，2 = 分类商品，3 = 商品详情 ，4 = 自定义页面

      if (page_type == 1) {
        //要访问的页面idx，当前页面menu_index
        common.totabar(idx, this.menu_index, this.menu_model);
      } else if (page_type == 2) {
        uni.navigateTo({
          url: '/pages/goods/goodsList/goodsList?cat_id=' + id
        });
      } else if (page_type == 3) {
        uni.navigateTo({
          url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + id
        });
      } else if (page_type == 0) {
        this.setData({
          webUrl: id
        });
        uni.navigateTo({
          url: '/pages/index/webview/webview'
        });
      } else {
        uni.reLaunch({
          url: '../../index/customPage/customPage?id=' + this.menu_model[idx].app_url
        });
      }
    },

    /** 默认菜单 */
    topages: function (e) {
      var idx = e.currentTarget.dataset.idx;
      app.globalData.menu_index = idx;
      common.defaultTotabar(idx, 2);
    },
    deleteItem: function (e) {
      var that = this;
      uni.showModal({
        title: '确定删除',
        success: function (res) {
          if (!res.confirm) {
            return;
          }

          if (e.currentTarget.dataset.index >= 0) {
            var id = that.requestData.cart_list[e.currentTarget.dataset.item].combination_cart[e.currentTarget.dataset.index].id;
          } else {
            var id = that.requestData.cart_list[e.currentTarget.dataset.item].id;
          }

          var requestUrl = that.url + '/api/cart/delete?cart_ids=' + id;
          request.post(requestUrl, {
            success: function (res) {
              that.getCardList();
            }
          });
        }
      });
    },
    valueToNum: function (e) {
      var goodsNum;
      var cart = this.requestData.cart_list[e.currentTarget.dataset.item];

      if (isNaN(e.detail.value) || e.detail.value < 1) {
        goodsNum = 1;
      } else {
        goodsNum = parseInt(e.detail.value);
      }

      var postData = {
        goodsNum: goodsNum,
        cartID: cart.id,
        item: e.currentTarget.dataset.item
      };
      this.changeNum(postData);
    },
    addNum: function (e) {
      var cart = this.requestData.cart_list[e.currentTarget.dataset.item];
      var postData = {
        goodsNum: cart.goods_num + 1,
        cartID: cart.id,
        item: e.currentTarget.dataset.item
      };
      this.changeNum(postData);
    },
    subNum: function (e) {
      var cart = this.requestData.cart_list[e.currentTarget.dataset.item];

      if (cart.goods_num == 1) {
        return;
      }

      var postData = {
        goodsNum: cart.goods_num - 1,
        cartID: cart.id,
        item: e.currentTarget.dataset.item
      };
      this.changeNum(postData);
    },

    /** 修改购物车数量 */
    changeNum: function (data) {
      var that = this;
      request.post(that.url + '/api/cart/changeNum', {
        data: {
          'cart[id]': data.cartID,
          'cart[goods_num]': data.goodsNum
        },
        success: function (res) {
          that.AsyncUpdateCart();
        },
        failStatus: function (res) {
          that.requestData.cart_list[data.item]['goods_num'] = that.requestData.cart_list[data.item]['goods_num'];
          that.setData({
            requestData: that.requestData
          });
          app.globalData.confirmBox(res.data.msg);
        }
      });
    },

    /** 查询购物车选中商品价格 */
    AsyncUpdateCart: function () {
      var that = this;
      var data = that.requestData.cart_list;
      var str = "";

      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          str += "?cart[" + i + "][id]=" + data[i]['id'];
          str += "&cart[" + i + "][selected]=" + data[i]['selected'];
        } else {
          str += "&cart[" + i + "][id]=" + data[i]['id'];
          str += "&cart[" + i + "][selected]=" + data[i]['selected'];
        }
      }

      request.get(that.url + '/api/cart/AsyncUpdateCart' + str, {
        isShowLoading: false,
        success: function (res) {
          res.data.result.cart_list.forEach(function (item, i) {
            if (item.combination_cart.length > 0 && item.combination) {
              var total = 0.00;
              item.combination_cart.forEach(function (items, i) {
                total = total + items.cut_fee;
              });
              item['combination']['total_cut_fee'] = item['cut_fee'] + total;
            }
          });
          res.data.result.cart_price_info.total_fee = res.data.result.cart_price_info.total_fee.toFixed(2);
          that.setData({
            requestData: res.data.result
          });
          that.doCheckAll();
        }
      });
    },
    checkAll: function () {
      var checkAll = !this.checkAllToggle;
      var cartList = this.requestData.cart_list;

      for (var i = 0; i < cartList.length; i++) {
        cartList[i]['selected'] = Number(checkAll);
      }

      this.setData({
        'requestData.cart_list': cartList
      });
      this.AsyncUpdateCart();
    },
    checkItem: function (e) {
      var cart = this.requestData;
      cart.cart_list[e.currentTarget.dataset.item].selected = Number(!cart.cart_list[e.currentTarget.dataset.item].selected);
      this.setData({
        requestData: cart
      });
      this.AsyncUpdateCart();
    },
    doCheckAll: function () {
      var cartList = this.requestData.cart_list;
      var selected = 0;

      if (!cartList) {
        return;
      }

      for (var i = 0, j = cartList.length; i < j; i++) {
        if (cartList[i].selected) {
          selected++;
          this.setData({
            setTlement: true
          });
        }
      }

      ;

      if (!selected) {
        this.setData({
          setTlement: false
        });
      }

      if (selected == cartList.length) {
        this.setData({
          checkAllToggle: true
        });
      } else {
        this.setData({
          checkAllToggle: false
        });
      }
    },
    postCardList: function (postData) {
      var that = this;
      request.post(that.url + '/api/cart/index', {
        data: {
          cart_form_data: postData
        },
        success: function (res) {
          that.setData({
            requestData: res.data.result
          });
          that.doCheckAll();
        }
      });
    },
    getCardList: function () {
      var that = this;
      request.get(that.url + '/api/cart/index', {
        success: function (res) {
          that.setData({
            requestData: res.data.result
          });
          that.doCheckAll();
          that.AsyncUpdateCart();
          uni.stopPullDownRefresh();
        }
      });
    },
    //去结算
    checkout: function () {
      //检查用户是否登录方可操作立即购买
      if (!app.globalData.auth.isAuth()) {
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      var hasAnySelected = false;
      var cartList = this.requestData.cart_list;

      for (var i = 0; i < cartList.length; i++) {
        if (cartList[i].selected) {
          hasAnySelected = true;
          break;
        }
      }

      if (!hasAnySelected) {
        return;
      }

      uni.navigateTo({
        url: '/pages/cart/cart2/cart2'
      });
    }
  }
};
</script>
<style>
page{
    background-color: #f5f5f5;
}
.container {
    display: flex;
    height: 100%;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
    background-color: #f5f5f5;
    padding-bottom:250rpx;
}
.login-in{
    width: 100%;
    box-sizing: border-box;
    background-color:#f5f5f5;
}
.order-item{
    display: flex;
    justify-content: space-around;
    height: 200rpx;
    padding: 10rpx 0;
    margin-top: 10rpx;
    background-color:#ffffff;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
}
.goods-ico{
    display: flex;
    align-items: center;
    width: 16rpx;
}
.goods-img{
    width: 180rpx;
    height: 180rpx;
    font-size: 0;
    margin-top: 10rpx;
}
.goods-cont{
    position: relative;
    width: 430rpx;
    height: 200rpx;
    font-size: 28rpx;
}
.goods-name{
    width: 420rpx;
    height: 68rpx;
    margin: 12rpx 0;
    line-height: 38rpx;
    color: #333;
    margin-bottom: 0;
    font-size: 26rpx;
}
.goods-attribute{
    height: 26rpx;
    line-height: 26rpx;
    font-size: 24rpx;
    color:#999;
    width: 380rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 22rpx;
}
.goods-price{
    height: 40rpx;
    line-height: 40rpx;
    width: 280rpx;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
    margin-top: 35rpx;
    display: block;
}
.btn-del{
    position: absolute;
    right: 16rpx;
    top: 18rpx;
    width: 34rpx;
    height: 34rpx;
}
.count{
    position: absolute;
    right: 0;
    bottom: 5rpx;
    width: 156rpx;
    height: 45rpx;
    font-size: 24rpx;
}
.count>view,.count>input{
    float: left;
    width: 50rpx;
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
}
.sub{
    border-right: 1px solid #f3f3f3;
    background: #f5f5f5;
    color: #999;
    font-weight: bold;
}
.add{
    border-left: 1px solid #f3f3f3;
    background: #f5f5f5;
    font-size: 36rpx;
    color: #999;
}
.pay-for{
    width: 100%;
    height: 100rpx;
    position: fixed;
    left: 0;
    bottom: 107rpx;
    font-size: 28rpx;
    color: #666;
    background-color:#fff;
    border-top: 1px solid #f3f3f3;
    z-index:9999;
}
.pay-for .pay-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    border-radius:0;
}
.pay-for .pay-disable{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #bbbbbb;
    color: #fff;
    border-radius:0;
}
.pay-for .consumer{
    float: right;
    margin-right: 20rpx;
    line-height: 50rpx;  
    margin-top:26rpx;
}
.pay-for .checkbox{
    float: left;
    padding-left: 40rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
}
.pay-for .ico-check{
   display: flex;
   align-items: center;
   margin-right: 20rpx;
   background: transparent;
}


/** 热卖推荐 **/

.choice_box {
    font-size: 12px;
    background-color:#f5f5f5;
    border: 2rpx solid #f3f3f3;
}
.choice_box .choice_list .choice_item{
    width: 345rpx;
    float: left;
    background-color: #fff;
    margin:20rpx 0 0rpx 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
.choice_box .choice_list .choice_item navigator{
    background: #fff;
}
.choice_box .choice_list image {
    width: 100%;
    height: 345rpx;
}
.choice_box .choice_list .title {
    height: 36rpx;
    width: 340rpx;
    line-height: 36rpx;
    text-align: left;
    color: #333;
    padding: 0 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 26rpx;
    margin: 15rpx 0;
}
.choice_box .choice_list .choice_footer {
    display: block; 
    margin: 20rpx 5rpx 15rpx;
    position: relative;
    height: 30rpx;
    line-height: 17rpx;
}
.choice_box .choice_list .choice_footer .price {
  color: #ff6a00;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 32rpx;
}
.choice_box .choice_list .choice_footer .similer {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #686868;
    width: fit-content;
    line-height: 30rpx;
    padding: 1rpx 6rpx;
    border-radius: 5rpx;
     font-size:.655rem;
}

.section{
    background-color: #fff;
    width: 100%;
}
.section-title{
    width: 100%;
    padding-top:30rpx;
    height:54rpx;
    line-height:54rpx;
    font-size:28rpx;
    font-weight: 700;
    color: #333;
    text-align: center;
    letter-spacing: 3rpx;
}
.section-subtitle{
    line-height:0;
    width:340rpx;
    height:16rpx;
    padding-bottom: 20rpx;
    margin:0 auto;
}
.dpg-img{
    width:40rpx;
    height:46rpx;
}
.dpg-title{
    margin-left:5px;
}
.flex{
    display: flex;
}

.justify-content{
    justify-content: space-between;
}
.top-title{
    padding:25rpx 16rpx;
    background-color:#ffffff;
    font-size:30rpx;
    font-weight:bold;
    padding-bottom:0;
}
.dpg-price{
    background-color:#ff6a00;
    color:white;
    padding:2rpx 8rpx;
    position:absolute;
    right:170rpx;
    bottom:14rpx;
    font-size:22rpx;
    border-radius:10rpx;
    line-height:30rpx;
}
.p-sign{
  position:absolute;
  right:14rpx;
  bottom:10rpx;
}
.h-pkc{
  margin-bottom: 20rpx;
  background-color: #ffffff;
}
.h-pkc .order-item{
  margin-top: 0;
  margin-bottom: 0;
}
.smg{
  font-size: 26rpx;
  display: inline-block;
}
.shopcar-image{
  width: 562rpx;
  height: 270rpx;
}
.lookbtn{
  width:200rpx;
  height:60rpx;
  background:#ff6a00;
  border-radius:10rpx;
  font-size:24rpx;
  line-height:60rpx;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 40rpx;
}
.no-word{
  font-size:24rpx;
  font-weight:400;
  color:rgba(153,153,153,1);
}
.delimg{
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: 0rpx;
  top: 75rpx;
}
.allbox{
  margin-right: 5rpx;
  margin-top: 30rpx;
}
.itembox{
  margin-top: 80rpx;
}
.market{
  color: #999;
  text-decoration:line-through;
  font-size: 22rpx;
  margin-left: 10rpx;
}
</style>